<template>
  <div class="my-target-wrapper">
      <title-bar
      :bar-title="barTitle"
      :more="true"
      :link="link">
        <span slot="right"
        v-if="isEdit">修改</span>
      </title-bar>
      <text-grid>
        <grid-item><label slot="label">目标</label><span slot="value">{{ values.target_sum | moneyFormate }}元</span></grid-item>
        <grid-item><label slot="label">成交</label><span slot="value">{{ values.cheng_jiao_sum | moneyFormate }}元</span></grid-item>
        <grid-item><label slot="label">完成</label><span slot="value">{{ values.proportion || 0 }}%</span></grid-item>
      </text-grid>
    </div>
</template>
<script>
import TitleBar from './title-bar'
import TextGrid from './TextGrid/grid'
import GridItem from './TextGrid/grid-item'
import { MY, TEAM, COMPANY } from '../constants/role'
import { mapState } from 'vuex'

export default {
  props: {
    values: {
      type: Object,
      default: function () {
        return {
          target_sum: 0,
          cheng_jiao_sum: 0,
          proportion: 0,
          prediction_sum: 0
        }
      }
    },
    barTitle: {
      type: String,
      default: '我的目标'
    },
    id: {
      type: String | Number
    },
    type: {
      type: String
    },
    time: {
      type: String | Number
    },
    suid: {
      type: String | Number
    }
  },
  data () {
    return {
      data: [],
      morePath: '',
      MY: MY,
      TEAM: TEAM,
      COMPANY: COMPANY,
      defaultLink: {
        name:  'performance-setting'
      },
      isEdit: false,
      link: {}
    }
  },
  watch: {
    values () {
      this.initLink()
    },
    type () {
      this.initLink()
    }
  },
  components: {
    TitleBar,
    TextGrid,
    GridItem
  },
  methods: {
    initLink () {
      let params = {type: this.type, team_id: this.id}

      if (this.type === COMPANY) {
        this.isEdit = false
      } else {
        const teamId = this.id || this.$route.query.id
        let isManager = !!this.user.teams.filter(team => parseInt(team.team_id) === parseInt(teamId)).length

        if (this.type === TEAM) {
          this.isEdit = isManager
          params = {...params, edit: isManager, team_id: this.id}
        } else {
          if (this.$route.query.suid === this.user.id) {
            isManager = true
          }
          if (this.$route.query.suid) {
            params = {...params, edit: isManager, suid: this.$route.query.suid}
            this.isEdit = isManager
          } else {
            params = {...params, edit: isManager, suid: this.user.id}
            this.isEdit = true
          }
        }
      }

      this.link = {
        ...this.defaultLink,
        query: {
          ...params
        }
      }
    }
  },
  beforeMount () {
    this.initLink()
  },
  computed: {
    ...mapState({
      user: state => state.app.user
    })
  }
}
</script>
<style lang="less">
.my-target-wrapper {
    background-color: white;
  }
</style>
